<template>
  <div class="list-container business">
     <div class='topbar clearfix'>
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{path:'/businessManag/businessManag'}">商户管理</el-breadcrumb-item>
              <el-breadcrumb-item>商户列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="fr topRight">
                <span>共{{total}}个商户</span>
                <span class="addProject" @click='addBusiness'>新建商户</span>
                <div class="seach clearfloat">
                  <el-input v-model="seachName" @keyup.native.enter="seachClick" style="float:left;width:60%" placeholder="请输入商户名称关键字或商户号进行搜索"></el-input>
                  <div class="seachBtn" @click="seachClick">搜索</div>
                </div>
            </div>
       </div>
       <div class="nav">
           <div class="tableHeader clearfloat">
               <div class="tableLi tableHeaderImg">商户名称</div>
               <div class="tableLi tableHeaderDetail">微信支付商户号</div>
               <div class="tableLi tableHeaderProject">绑定项目</div>
               <div class="tableLi tableHeaderOrder">会创建时间</div>
               <div class="tableLi tableHeaderStatus">创建人 </div>
           </div>
           <ul class="navList clearfloat">
              <li v-if='!navList.length' class='nodata'>暂无数据</li>
               <li v-for="(item,index) in navList" :key="index" v-else>
                   <div class="table clearfloat">
                        <!-- 商户名称 -->
                        <div class="tableDiv HeaderImg clearfix" ref="HeaderImg">{{item.name}} </div>
                        <!-- 微信支付商户号 -->
                        <div class="tableDiv HeaderDetail" ref="HeaderDetail">
                            <div class="topList clearfloat">{{item.wxMerchantNo}}</div>
                        </div>
                        <div class="tableDiv HeaderProject" ref="HeaderProject">{{item.projectName?item.projectName:'无'}}</div>
                        <!-- 会创建时间 -->
                        <div class="tableDiv HeaderOrder" ref="HeaderOrder">{{getTimeDate(item.createdTime,'yyyy-MM-dd hh:mm:ss')}}</div>
                        <!-- 创建人   -->
                        <div class="tableDiv HeaderStatus" ref="HeaderStatus">{{item.creatorPhoneShow}}</div>
                   </div>
               </li>
           </ul>
           <div class="pagination" v-if="total>dataParm.pageSize">
              <el-pagination
                  background
                  :current-page.sync='dataParm.pageNo'
                  @current-change="handleCurrentChange"
                  :page-size="dataParm.pageSize"
                  :pager-count="11"
                  layout="prev, pager, next"
                  :total="total">
              </el-pagination>
            </div>
       </div>
       <el-dialog
        class="addBusiness"
        title="新增商户"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">
        <div class='content' v-if="!secStatus">
            <div class='business-name'>
                <span class='label'>商户名称:</span>
                <input type="text" placeholder=" 请输入商户名称，最多15个字" v-model.trim="bindObj.name" maxlength="15">
                <p class='tips' v-if="nameTips">*提交失败.此商户名称已存在</p>
            </div>
            <div class='merch-num'>
                <span class='label'>微信支付商户号:</span>
                <input type="text" placeholder="请输入微信商户号" v-model.trim="bindObj.wxMerchantNo" maxlength="20">
                <p class='tips' v-if="merchTips">*提交失败.此微信支付商户号已存在</p>
            </div>
            <div class='bind-project'>
                <span class='label'>绑定项目:</span>
                <el-select v-model="bindObj.projectId" filterable placeholder=" 请选择项目">
                    <el-option
                    v-for="item in ProjectOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <p class='tips' v-if="projectTips">*提交失败.此项目已绑定其它商户号</p>
            </div>
        </div>
        <div class='secDialog' v-if="secStatus">
            <div class='li'>
                <span class='label'>商户名称:</span>
                <span>{{bindObj.name}}</span>
            </div>
            <div class='li'>
                <span class='label'>微信支付商户号:</span>
                <span>{{bindObj.wxMerchantNo}}</span>
            </div>
            <div class='li'>
                <span class='label'>绑定项目:</span>
                <span>{{projectName}}</span>
            </div>
            <p>*商户创建后，信息无法编辑修改。请确认以上信息无误</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancleDia">{{cancelCon}}</el-button>
          <el-button type="primary" @click="sureBtn()">{{diaContent}}</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate,transformPrice} from '@/utils/index.js'
export default {
  data() {
    return {
        dataParm:{
            keyword:'',
            pageNo:1,
            pageSize:10
        },
        seachName:"",
        navList:[],
        total:0,
        totalList:0,
        dialogVisible:false,
        diaContent:'提 交',
        cancelCon:'取 消',
        secStatus:false,
        bindObj:{
            name:'',
            wxMerchantNo:'',
            projectId:''
        },
        projectName:'',
        ProjectOptions:[],
        nameTips:false,
        merchTips:false,
        projectTips:false,
    }
  },
  created() {
    api.findByOperStatus({
       operStatus:"0,1,9",
       pageNo:1,
       pageSize:10000,
     },{
      headers: {
          'Content-Type': 'application/json;charset=UTF-8'
      }
    }).then(json=>{
        this.ProjectOptions=json.list;
    })
    this.getCustomerList();
  },
  computed:{
      getTimeDate(){//获取时间戳
        return (time,format)=>{
          if(time){
            return FormatDate(new Date(Number(time)),format)
          }
        }
      },
  },
  mounted() {
    
  },
  methods: {
    addBusiness(){
        this.dialogVisible = true;
    },
     getCustomerList(){
       api.listPerchant({...this.dataParm}).then(json=>{
          this.navList = json.list;
          this.total = json.total;
       });
     },
    ToDetail(item){//去编辑
        this.$router.push({
          path:'/project/userManager/userDetail',
          name:'userDetail',
          params:{
              id:item.id,
          },
        });
    },
    closeDialogOpration(obj){
        this.dialogVisible = false;
        this.secStatus = false;
        this.cancelCon = '取 消';
        this.diaContent = '提 交';
        Object.keys(obj).map(key => obj[key] = '');
    },
    handleClose(){
        this.closeDialogOpration(this.bindObj)
    },
    cancleDia(){
        if(this.secStatus){
            this.secStatus = false;
        }else{
            this.closeDialogOpration(this.bindObj)
        }
    },
    sureBtn(){
        if(this.secStatus){//提交
           this.addPerchant();
        }else{//校验
          this.validPerchant();
        }
    },
    validPerchant(){
      api.validPerchant({
        ...this.bindObj
      }).then(json=>{
        if(json.code == 0){//成功
          this.nameTips = false;
          this.merchTips = false;
          this.projectTips = false;
          this.secStatus = true;
          this.projectName = this.ProjectOptions.find(item=>{
              return item.id == this.bindObj.projectId
          }).name;
          this.cancelCon = '返 回';
          this.diaContent = '确 认';
        }else if(json.code == 10){//商户名称存在
            this.nameTips = true;
            this.merchTips = false;
            this.projectTips = false;
        }else if(json.code == 20){//微信商户存在
            this.nameTips = false;
            this.merchTips = true;
            this.projectTips = false;
        }else if(json.code == 30){//项目存在
            this.nameTips = false;
            this.merchTips = false;
            this.projectTips = true;
        }else {
            this.toastMsg(json.message,'error');
            this.nameTips = false;
            this.merchTips = false;
            this.projectTips = false;
        }
      })
    },
    addPerchant(){
      api.addPerchant({
          ...this.bindObj
      }).then(json=>{
          if(json.code == 0){//成功
              this.dataParm.pageNo = 1;
              this.dataParm.keyword = '',
              this.closeDialogOpration(this.bindObj)
              this.getCustomerList();
          }
      })
    },
    toastMsg(msg,type){
      this.$message({
        message: msg,
        type: type
      });
    },
    //点击搜索
    seachClick(){
       this.dataParm.pageNo = 1;
       this.dataParm.keyWord = this.seachName;
       this.getCustomerList();
    },
     //点击分页触发列表接口
     handleCurrentChange(val) {
       this.dataParm.pageNo = val;
       this.getCustomerList();
     }
  }
}
</script>
<style lang='scss'>
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}
.el-dialog{
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}
.projectNameSelect .el-select-dropdown__item {
   overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
  .projectNameSelect  .el-select-dropdown__item.selected{
    color: #FC612A;
  }
  .business  .topbar .topRight .seach .el-input{
      width:270px!important;
  }
  .business .topbar .topRight .seach .el-input .el-input__inner{
    width:270px;
  }
  .el-select .el-input.is-focus .el-input__inner{
      border: 1px solid #DDDDDD;
  }
  .el-select .el-input__inner:focus{
      border: 1px solid #DDDDDD;
  }
  .el-select-dropdown__item.selected{
      color: #FC612A;
  }
    .addBusiness{
        .el-dialog__header{
            border-bottom: 1px solid #E9E9E9;
        }
        .content{
            font-size: 14px;
            .business-name,.merch-num,.bind-project{
                position: relative;
            }
            .merch-num{
                margin-top: 24px;
                margin-bottom: 24px;
            }
            .label{
                width: 102px;
                color: #262626;
                display: inline-block;
            }
            input{
                border:none;
                outline: none;
                border: 1px solid #DDDDDD;
                border-radius: 4px;
                padding: 10px;
                width: 340px;
                height: 36px;
                line-height: 36px;
                box-sizing: border-box;
                font-size: 12px;
                color: #262626;
                // &:focus{
                //     border:1px solid #FC612A;
                // }
            }
            p{
                color: #FC612A;
                position: absolute;
                bottom: -18px;
                left: 108px;
            }
            ::-webkit-input-placeholder {
                font-size: 12px;
                color: #262626;
            }
            ::-moz-input-placeholder {
                font-size: 12px;
                color: #262626;
            }
            :-ms-input-placeholder {
                font-size: 12px;
                color: #262626;
            }
        }
        .secDialog{
            .li{
                margin-top: 14px;
            }
            .label{
                width: 106px;
                color: #262626;
                display: inline-block;
            }
            span{
                color: #262626;
            }
            p{
                color: #FC612A;
                font-size: 14px;
                font-weight: bold;
                margin-top: 37px;
                text-align: center;
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                display: flex;
                justify-content: center;
                flex-flow: row-reverse;
                .el-button+.el-button{
                    margin: 0;
                }
                .el-button--default{
                    margin-left: 10px;
                    background: #C3C3C3;
                    color: #FFFFFF;
                    &:active{
                       border-color: #C3C3C3
                    }
                    &:hover{
                       border-color: #C3C3C3
                    }
                    &:focus{
                       border-color: #C3C3C3
                    }
                }
                .el-button--primary:active,.el-button--primary:hover,.el-button--primary:focus{
                    background:#FC612A;
                }
               
                .el-button:focus, .el-button:hover{
                    color: #FFFFFF;
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
  .nav {
    .top {
      padding:20px 0 0px 0;
      box-sizing: border-box;
      .addProject {
        float: left;
        width: 150px;
        height: 40px;
        color: #fff;
        text-align: center; 
        background: #1890ff;
        cursor: pointer;
        border-radius: 4px;
        line-height: 40px;
      }
      span {
        float: left;
        margin-left:30px;
        line-height: 40px;
      }
    }
    .navList {
      padding:0;
      margin:0;
      min-width:1180px;  
      overflow-x:auto; 
      li {
         border-bottom: 1px solid  #EEEEEE;
         float: left;
         width:100%;
         background: #fff;
         cursor: pointer;
         margin-top: 0;
         padding-left:12px;
        .table {
            padding: 12px 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            .tableDiv {
              float: left;
              padding-right:20px;
              font-size: 14px;
              color: #777777;
              height: 40px;
              box-sizing: border-box;
              .miueList {
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
              };
              .upIng{
                color: #FC612A
              }
              .closeStatus{
                color: #8C8C8D
              }
              .BeopenedStatus{
                color: #26A9FF;
              }
            }
            .HeaderImg {
              margin-left:0px;
              line-height: 40px;
              font-size: 16px;
              color: #262626;
              font-weight:bold;
            }
            .HeaderDetail {
              .topList {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                color: #777777;
              }
            }
            .HeaderProject{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                color: #777777;
            }
            .HeaderOrder{
                text-align: center;
                line-height:40px;
                color: #777777;
            }
            .HeaderStatus{
              height: 40px;
              line-height:40px;
              text-align: center;
              color: #777777;
            }
        }
      }
      .nodata{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align:center;
      }
    }
    .pagination {
      margin-top:30px;
      text-align: center;
    }
    .tableHeader {
      padding:0 8px;
      padding-left:20px;
      box-sizing: border-box;
      margin:10px 0 0 0;
      border-bottom: 1px solid #E9E9E9;
      display: flex;
      flex-direction: row;
      .tableLi {
        float: left;
        padding-right:20px;
        font-size: 12px;
        color: #777777;
        height: 32px;
        line-height: 32px;
        text-align: center;
        box-sizing: border-box;
      }
      .tableHeaderImg{
        text-align: left;
      }
    }
    .tableHeaderImg ,.HeaderImg{
        min-width: 250px;
        width:25%;
    }
    .tableHeaderDetail ,.HeaderDetail{
        width:25%;
        min-width:250px;
    }
    .tableHeaderProject ,.HeaderProject{
        width:25%;
        min-width:250px;
    }
    .tableHeaderOrder ,.HeaderOrder{
        width:10%;
        min-width:200px;
    }
    .tableHeaderStatus,.HeaderStatus {
        width:15%;
        min-width:200px;
    }
  }
</style>